<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>混合App之Ionic3小结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="Ionic,Angular,">
  

  <meta name="description" content="没有angular基础，看一下这篇文章 http://blog.poetries.top/2019/01/09/angular7-intro-summary  一、介绍 Ionic 是一款基于 Angular、Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一 个跨平台的移动应用。可以快速开发移动 App、移动端 WEB 页面、微信公众平台应用，混 合 app web页面">
<meta name="keywords" content="Ionic,Angular">
<meta property="og:type" content="article">
<meta property="og:title" content="混合App之Ionic3小结篇">
<meta property="og:url" content="http://blog.poetries.top/2019/01/10/ionic3-summary/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="没有angular基础，看一下这篇文章 http://blog.poetries.top/2019/01/09/angular7-intro-summary  一、介绍 Ionic 是一款基于 Angular、Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一 个跨平台的移动应用。可以快速开发移动 App、移动端 WEB 页面、微信公众平台应用，混 合 app web页面">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/235.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/236.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/237.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/238.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/239.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/240.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/241.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/242.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/243.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/244.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/245.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/246.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/247.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/248.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/249.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/250.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/251.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/252.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/253.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/254.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/255.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/256.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/257.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/258.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/259.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/300.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/310.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/302.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/303.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/304.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/305.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/306.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/307.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/308.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/309.png">
<meta property="og:image" content="https://poetries1.gitee.io/img-repo/2019/10/310.png">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/1480597-2fbdaea1e10a67d3.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.922Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="混合App之Ionic3小结篇">
<meta name="twitter:description" content="没有angular基础，看一下这篇文章 http://blog.poetries.top/2019/01/09/angular7-intro-summary  一、介绍 Ionic 是一款基于 Angular、Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一 个跨平台的移动应用。可以快速开发移动 App、移动端 WEB 页面、微信公众平台应用，混 合 app web页面">
<meta name="twitter:image" content="https://poetries1.gitee.io/img-repo/2019/10/235.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#一、介绍"><span class="toc-text">一、介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-1-ionic-特点"><span class="toc-text">1.1 ionic 特点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-2-Ionic-和-Cordova-phonegap-、Angular-关系"><span class="toc-text">1.2 Ionic 和 Cordova(phonegap)、Angular 关系</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#二、环境搭建"><span class="toc-text">二、环境搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-Ionic初始化构建"><span class="toc-text">2.1 Ionic初始化构建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-Genymotion-安卓模拟器"><span class="toc-text">2.2 Genymotion 安卓模拟器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-在IOS环境下体验"><span class="toc-text">2.3 在IOS环境下体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-在安卓下体验"><span class="toc-text">2.4 在安卓下体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-在浏览器-微信下体验"><span class="toc-text">2.5 在浏览器/微信下体验</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-6-ionic的常用命令"><span class="toc-text">2.6 ionic的常用命令</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#三、Ionic3-x-目录结构分析及创建组件"><span class="toc-text">三、Ionic3.x+ 目录结构分析及创建组件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-Ionic3-x-目录结构分析"><span class="toc-text">3.1 Ionic3.x 目录结构分析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-创建组件"><span class="toc-text">3.2 创建组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-3-创建页面以及页面跳转"><span class="toc-text">3.3 创建页面以及页面跳转</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#四、Ionic页面生命周期"><span class="toc-text">四、Ionic页面生命周期</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#五、API的使用"><span class="toc-text">五、API的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#5-1-图片上传"><span class="toc-text">5.1 图片上传</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-2-Icon-本地存储的使用"><span class="toc-text">5.2 Icon 本地存储的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-3-二维码扫描"><span class="toc-text">5.3 二维码扫描</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-4-读取版本信息"><span class="toc-text">5.4 读取版本信息</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#六、页面之间的传参"><span class="toc-text">六、页面之间的传参</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#6-1-js跳转方式"><span class="toc-text">6.1 js跳转方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-2-HTML传参"><span class="toc-text">6.2 HTML传参</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#七、管道的使用"><span class="toc-text">七、管道的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#8-2-自定义样式"><span class="toc-text">8.2 自定义样式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-3-全局设置夜间模式切换"><span class="toc-text">8.3 全局设置夜间模式切换</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#九、组件化开发-自定义组件"><span class="toc-text">九、组件化开发-自定义组件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#9-1-自定义组件"><span class="toc-text">9.1 自定义组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-2-hidden-style-class-动态控制组件"><span class="toc-text">9.2 [hidden] [style] [class] 动态控制组件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十、指令"><span class="toc-text">十、指令</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十一、常用组件使用"><span class="toc-text">十一、常用组件使用</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#11-1-ModalController-LoadingController-ToastController"><span class="toc-text">11.1 ModalController/LoadingController/ToastController</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-2-Refresh组件"><span class="toc-text">11.2 Refresh组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-3-List组件"><span class="toc-text">11.3 List组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-4-button组件"><span class="toc-text">11.4 button组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-5-card组件"><span class="toc-text">11.5 card组件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-6-表单组件"><span class="toc-text">11.6 表单组件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十二、Ionic打包上线流程"><span class="toc-text">十二、Ionic打包上线流程</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#12-1-图标生成"><span class="toc-text">12.1 图标生成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-2-启动图生成"><span class="toc-text">12.2 启动图生成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-3-打包前细节处理"><span class="toc-text">12.3 打包前细节处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-4-打包部署"><span class="toc-text">12.4 打包部署</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-5-上架流程"><span class="toc-text">12.5 上架流程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-1-IOS的打包"><span class="toc-text">12.5.1 IOS的打包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-2-安卓版本打包"><span class="toc-text">12.5.2 安卓版本打包</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#12-5-3-网站微信端发布"><span class="toc-text">12.5.3 网站微信端发布</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十三、一些问题记录"><span class="toc-text">十三、一些问题记录</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#13-1-问题"><span class="toc-text">13.1 问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-2-技巧"><span class="toc-text">13.2 技巧</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#十四、更多参考"><span class="toc-text">十四、更多参考</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#14-1-项目学习"><span class="toc-text">14.1 项目学习</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-2-文档参考"><span class="toc-text">14.2 文档参考</span></a></li></ol></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-ionic3-summary" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">混合App之Ionic3小结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2019.01.10</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 6.4k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 31分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>没有<code>angular</code>基础，看一下这篇文章 <a href="http://blog.poetries.top/2019/01/09/angular7-intro-summary">http://blog.poetries.top/2019/01/09/angular7-intro-summary</a></p>
</blockquote>
<h1 id="一、介绍"><a href="#一、介绍" class="headerlink" title="一、介绍"></a>一、介绍</h1><blockquote>
<p><code>Ionic</code> 是一款基于 <code>Angular</code>、<code>Cordova</code> 的强大的 <code>HTML5</code> 移动应用开发框架 , 可以快速创建一 个跨平台的移动应用。可以快速开发移动 <code>App</code>、移动端 <code>WEB</code> 页面、微信公众平台应用，混 合 <code>app web</code>页面。</p>
</blockquote>
<h2 id="1-1-ionic-特点"><a href="#1-1-ionic-特点" class="headerlink" title="1.1 ionic 特点"></a>1.1 ionic 特点</h2><ul>
<li><code>ionic</code> 基于<code>Angular</code>语法，简单易学。</li>
<li><code>ionic</code> 是一个轻量级框架。</li>
<li><code>ionic</code> 完美的融合下一代移动框架，支持 <code>Angularjs</code> 的特性， <code>MVC</code> ，代码易维护。</li>
<li><code>ionic</code> 提供了漂亮的设计，通过 <code>SASS</code> 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。</li>
<li><code>ionic</code> 专注原生，让你看不出混合应用和原生的区别</li>
<li><code>ionic</code> 提供了强大的命令行工具。</li>
<li><code>ionic</code> 性能优越，运行速度快。</li>
</ul>
<h2 id="1-2-Ionic-和-Cordova-phonegap-、Angular-关系"><a href="#1-2-Ionic-和-Cordova-phonegap-、Angular-关系" class="headerlink" title="1.2 Ionic 和 Cordova(phonegap)、Angular 关系"></a>1.2 Ionic 和 Cordova(phonegap)、Angular 关系</h2><blockquote>
<p><code>ionic</code> = <code>Cordova</code> + <code>Angular</code> + <code>ionic CSS</code></p>
</blockquote>
<blockquote>
<p><code>Ionic</code>是完全基于谷歌的 <code>Angular</code> 框架，在 <code>Angular</code> 基础上面做了一些封装，让我们可以更快 速和容易的开发移动的项目。<code>Ionic</code> 调用原生的功能是基于 <code>Cordova</code>,<code>Cordova</code> 提供了使用 <code>JavaScript</code> 调用 <code>Native</code> 功能，<code>ionic</code> 自己也封装了一套漂亮的 <code>CSS UI</code> 库。</p>
</blockquote>
<h1 id="二、环境搭建"><a href="#二、环境搭建" class="headerlink" title="二、环境搭建"></a>二、环境搭建</h1><h2 id="2-1-Ionic初始化构建"><a href="#2-1-Ionic初始化构建" class="headerlink" title="2.1 Ionic初始化构建"></a>2.1 Ionic初始化构建</h2><blockquote>
<p><a href="https://ionicframework.com/getting-started#cli" target="_blank" rel="noopener">https://ionicframework.com/getting-started#cli</a></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 全局安装</span></span><br><span class="line">npm install -g ionic</span><br></pre></td></tr></table></figure>
<ul>
<li><code>ionic info</code> (查看当前<code>ionic</code>的全部版本信息)</li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/235.png" alt></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic start myApp tabs <span class="comment"># 建议使用初始化</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">cd</span> myApp </span><br><span class="line"></span><br><span class="line">ionic serve</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/236.png" alt></p>
<ul>
<li><code>ionic serve</code> 运行项目</li>
</ul>
<h2 id="2-2-Genymotion-安卓模拟器"><a href="#2-2-Genymotion-安卓模拟器" class="headerlink" title="2.2 Genymotion 安卓模拟器"></a>2.2 Genymotion 安卓模拟器</h2><blockquote>
<p>使用方法 <a href="https://www.jianshu.com/p/aabc4fd01311" target="_blank" rel="noopener">https://www.jianshu.com/p/aabc4fd01311</a></p>
</blockquote>
<h2 id="2-3-在IOS环境下体验"><a href="#2-3-在IOS环境下体验" class="headerlink" title="2.3 在IOS环境下体验"></a>2.3 在IOS环境下体验</h2><blockquote>
<p>需要配备<code>mac</code>，安装<code>xcode</code></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># mac下需要添加sudo</span></span><br><span class="line">sudo ionic cordova platform add ios</span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意获取目录权限的问题</span></span><br><span class="line">chmod -R 777 项目文件夹名</span><br></pre></td></tr></table></figure>
<blockquote>
<p>真机调试与发布需要<code>Apple</code>开发者账号</p>
</blockquote>
<p><strong>打开xcode选择platform下中ios文件夹，点击运行项目</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/237.png" alt></p>
<h2 id="2-4-在安卓下体验"><a href="#2-4-在安卓下体验" class="headerlink" title="2.4 在安卓下体验"></a>2.4 在安卓下体验</h2><p><strong>1. 添加android</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic cordova platform add android</span><br><span class="line"></span><br><span class="line"><span class="comment"># 注意获取目录权限的问题</span></span><br><span class="line">chmod -R 777 项目文件夹名</span><br><span class="line"></span><br><span class="line"><span class="comment"># 直接使用Android studio 进行调试链接</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 打包成apk拖入Genymotion调试</span></span><br></pre></td></tr></table></figure>
<p><strong>2. 下载android studio 打开/platform/andriod文件</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/238.png" alt></p>
<p><strong>3. 然后连接android studio结合geny生成apk调试</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/239.png" alt></p>
<h2 id="2-5-在浏览器-微信下体验"><a href="#2-5-在浏览器-微信下体验" class="headerlink" title="2.5 在浏览器/微信下体验"></a>2.5 在浏览器/微信下体验</h2><p><strong>1. 添加browser文件夹</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic cordova platform add browser</span><br></pre></td></tr></table></figure>
<p><strong>2. 打包</strong></p>
<blockquote>
<p><code>ionic cordova build browser</code></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/240.png" alt><br><img src="https://poetries1.gitee.io/img-repo/2019/10/241.png" alt></p>
<p><strong>3. 运行</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm run serve</span><br><span class="line"></span><br><span class="line"><span class="comment"># 浏览器打开 http://localhost:8100</span></span><br></pre></td></tr></table></figure>
<p><strong>4. 部署</strong></p>
<blockquote>
<p>把<code>www</code>目录部署到服务器上即可</p>
</blockquote>
<blockquote>
<p>在微信下体验 注意微信<code>title</code>问题</p>
</blockquote>
<h2 id="2-6-ionic的常用命令"><a href="#2-6-ionic的常用命令" class="headerlink" title="2.6 ionic的常用命令"></a>2.6 ionic的常用命令</h2><p><strong>1. 基本命令</strong></p>
<ul>
<li><code>ionic g page myPage</code> 创建页面</li>
<li><code>ionic g provider MyData</code> 创建<code>provider</code></li>
<li><code>ionic serve</code> 在浏览器中看</li>
<li><code>ionic platform add/remove android/ios</code> 添加删除平台</li>
<li><code>ionic build android/ios</code>  快捷打包（<code>IOS</code>最好通过<code>xcode</code>打包发布）</li>
</ul>
<p><strong>2. 辅助命令</strong></p>
<ul>
<li><code>ionic info</code> 查看关于<code>ionic</code>的系统消息</li>
<li><code>ionic emulate android/ios</code> 模拟器中打开</li>
<li><code>ionic cordova plugin list</code> 查看插件安装列表</li>
</ul>
<p><strong>3. 正式发布需要的命令</strong></p>
<ul>
<li><code>ionic cordova platforms add android</code> 添加安卓平台</li>
<li><code>ionic cordova build android --release</code> 打包成<code>apk</code></li>
</ul>
<h1 id="三、Ionic3-x-目录结构分析及创建组件"><a href="#三、Ionic3-x-目录结构分析及创建组件" class="headerlink" title="三、Ionic3.x+ 目录结构分析及创建组件"></a>三、Ionic3.x+ 目录结构分析及创建组件</h1><h2 id="3-1-Ionic3-x-目录结构分析"><a href="#3-1-Ionic3-x-目录结构分析" class="headerlink" title="3.1 Ionic3.x 目录结构分析"></a>3.1 Ionic3.x 目录结构分析</h2><p><strong>1. 整体目录结构</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/242.png" alt></p>
<ul>
<li><code>hooks</code>:编译 <code>cordova</code> 时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中 </li>
<li><code>node_modules</code> :<code>node</code> 各类依赖包</li>
<li><code>resources</code> :<code>android/ios</code> 资源(更换图标和启动动画) </li>
<li><code>src</code>:开发工作目录，页面、样式、脚本和图片都放在这个目录下</li>
<li><code>www</code>:静态文件</li>
<li><code>platforms</code>:生成 <code>android</code> 或者 <code>ios</code> 安装包路径(<code>platforms\android\build\outputs\apk:apk</code><br>所在位置)执行 <code>cordova platform add android</code> 后会生成</li>
<li><code>plugins</code>:插件文件夹，里面放置各种 <code>cordova</code> 安装的插件</li>
<li><code>config.xml</code>: 打包成 <code>app</code> 的配置文件</li>
<li><code>package.json</code>: 配置项目的元数据和管理项目所需要的依赖</li>
<li><code>tsconfig.json</code>: <code>TypeScript</code> 项目的根目录，指定用来编译这个项目的根文件和编译选项 </li>
<li><code>tslint.json</code>:格式化和校验 <code>typescript</code></li>
</ul>
<p><strong>2. src目录</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/243.png" alt></p>
<ul>
<li><code>app</code>:应用根目录</li>
<li><code>assets</code>:资源目录(静态文件(图片，js 框架) </li>
<li><code>pages</code>:页面文件，放置编写的页面文件，包括:<code>html</code>，<code>scss</code>，<code>ts</code></li>
<li><code>theme</code>:主题文件，里面有一个 <code>scss</code> 文件，设置主题信息。</li>
</ul>
<p><strong>3. Ionic3.x src 下面文件分析</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/244.png" alt></p>
<p><strong>4. app.module.ts 分析</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//这个根模块会告诉 ionic 如何组装该应用</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; NgModule, ErrorHandler &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; BrowserModule &#125; <span class="keyword">from</span> <span class="string">'@angular/platform-browser'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; HttpClientModule &#125; <span class="keyword">from</span> <span class="string">'@angular/common/http'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; IonicApp, IonicModule, IonicErrorHandler &#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; IonicStorageModule &#125; <span class="keyword">from</span> <span class="string">'@ionic/storage'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; MyApp &#125; <span class="keyword">from</span> <span class="string">'./app.component'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 其他组件</span></span><br><span class="line"><span class="keyword">import</span> &#123; HomePage &#125; <span class="keyword">from</span> <span class="string">'../pages/home/home'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; DiscoveryPage &#125; <span class="keyword">from</span> <span class="string">'../pages/discovery/discovery'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ChatPage &#125; <span class="keyword">from</span> <span class="string">'../pages/chat/chat'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; NotificationPage &#125; <span class="keyword">from</span> <span class="string">'../pages/notification/notification'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; MorePage &#125; <span class="keyword">from</span> <span class="string">'../pages/more/more'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; LoginPage &#125; <span class="keyword">from</span> <span class="string">'../pages/login/login'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; TabsPage &#125; <span class="keyword">from</span> <span class="string">'../pages/tabs/tabs'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; StatusBar &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/status-bar'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; SplashScreen &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/splash-screen'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProvider &#125; <span class="keyword">from</span> <span class="string">'../providers/api/api'</span>;</span><br><span class="line"></span><br><span class="line">@NgModule(&#123;</span><br><span class="line">  declarations: [</span><br><span class="line">    MyApp,</span><br><span class="line">    HomePage,</span><br><span class="line">    DiscoveryPage,</span><br><span class="line">    ChatPage,</span><br><span class="line">    NotificationPage,</span><br><span class="line">    MorePage,</span><br><span class="line">    LoginPage,</span><br><span class="line">    TabsPage</span><br><span class="line">  ],</span><br><span class="line">  imports: [</span><br><span class="line">    BrowserModule,</span><br><span class="line">    HttpClientModule,</span><br><span class="line">    IonicModule.forRoot(MyApp),</span><br><span class="line">    IonicStorageModule.forRoot()</span><br><span class="line">  ],</span><br><span class="line">  bootstrap: [IonicApp],</span><br><span class="line">  entryComponents: [</span><br><span class="line">    MyApp,</span><br><span class="line">    HomePage,</span><br><span class="line">    DiscoveryPage,</span><br><span class="line">    ChatPage,</span><br><span class="line">    NotificationPage,</span><br><span class="line">    MorePage,</span><br><span class="line">    LoginPage,</span><br><span class="line">    TabsPage</span><br><span class="line">  ],</span><br><span class="line">  providers: [</span><br><span class="line">    StatusBar,</span><br><span class="line">    SplashScreen,</span><br><span class="line">    &#123;<span class="attr">provide</span>: ErrorHandler, <span class="attr">useClass</span>: IonicErrorHandler&#125;,</span><br><span class="line">    ApiProvider</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AppModule</span> </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3-2-创建组件"><a href="#3-2-创建组件" class="headerlink" title="3.2 创建组件"></a>3.2 创建组件</h2><ol>
<li><code>cd</code> 到我们的项目目录</li>
<li>通过 <code>ionic g component</code> 组件名称创建组件</li>
</ol>
<blockquote>
<p>输入<code>ionic g</code>后，可以创建的组件如下</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/245.png" alt></p>
<ol start="3">
<li>创建完成组件以后会在 <code>src</code> 目录下面多一个 <code>components</code> 的目录，这个目录里面有我们用命令创建的所有的组件</li>
</ol>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/246.png" alt></p>
<ol start="4">
<li>如果我们要使用这些组件必须在 <code>app.module.ts</code> 里面注册我们的模块，注册完成后就可以在 <code>pages</code> 里面的其页面里面使用这些组件</li>
</ol>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/247.png" alt><br><img src="https://poetries1.gitee.io/img-repo/2019/10/248.png" alt></p>
<h2 id="3-3-创建页面以及页面跳转"><a href="#3-3-创建页面以及页面跳转" class="headerlink" title="3.3 创建页面以及页面跳转"></a>3.3 创建页面以及页面跳转</h2><p><strong>1. 创建页面</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic g page news</span><br></pre></td></tr></table></figure>
<p><strong>2. 跳转</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">ion-button</span> (<span class="attr">click</span>)=<span class="string">"pushButton"</span>&gt;</span>执行button跳转<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/249.png" alt></p>
<h1 id="四、Ionic页面生命周期"><a href="#四、Ionic页面生命周期" class="headerlink" title="四、Ionic页面生命周期"></a>四、Ionic页面生命周期</h1><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在</span></span><br><span class="line">onPageLoaded() &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'page 1: page loaded.'</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 页面即将进入的时候</span></span><br><span class="line">onPageWillEnter() &#123;</span><br><span class="line">  <span class="comment">// 在这里可以做页面初始化的一些事情</span></span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'page 1: page will enter.'</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 页面已经进入的时候</span></span><br><span class="line">onPageDidEnter() &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'page 1: page did enter.'</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 页面即将离开的时候</span></span><br><span class="line">onPageWillLeave() &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'page 1: page will leave.'</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 页面已经离开的时候</span></span><br><span class="line">onPageDidLeave() &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'page 1: page did leave.'</span>);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 从 DOM 中移除的时候执行的生命周期</span></span><br><span class="line">onPageWillUnload() &#123;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 从 DOM 中移除执行完成的时候</span></span><br><span class="line">onPageDidUnload() &#123;</span><br><span class="line"> </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="五、API的使用"><a href="#五、API的使用" class="headerlink" title="五、API的使用"></a>五、API的使用</h1><h2 id="5-1-图片上传"><a href="#5-1-图片上传" class="headerlink" title="5.1 图片上传"></a>5.1 图片上传</h2><blockquote>
<p>文档 <a href="https://ionicframework.com/docs/native" target="_blank" rel="noopener">https://ionicframework.com/docs/native</a></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm i --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer</span><br><span class="line"></span><br><span class="line"><span class="comment"># 插件 mac下需要sudo</span></span><br><span class="line">sudo ionic cordova plugin add cordova-plugin-camera </span><br><span class="line">sudo ionic cordova plugin add cordova-plugin-file </span><br><span class="line">sudo ionic cordova plugin add cordova-plugin-file-transfer</span><br><span class="line">sudo ionic cordova plugin add cordova-plugin-filepath</span><br></pre></td></tr></table></figure>
<h2 id="5-2-Icon-本地存储的使用"><a href="#5-2-Icon-本地存储的使用" class="headerlink" title="5.2 Icon 本地存储的使用"></a>5.2 Icon 本地存储的使用</h2><blockquote>
<p><a href="https://ionicframework.com/docs/storage" target="_blank" rel="noopener">https://ionicframework.com/docs/storage</a></p>
</blockquote>
<p><strong>1. 安装插件</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic cordova plugin add cordova-sqlite-storage</span><br><span class="line"></span><br><span class="line">npm install --save @ionic/storage</span><br></pre></td></tr></table></figure>
<p><strong>2. src/app/app.module.ts导入配置</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; IonicStorageModule &#125; <span class="keyword">from</span> <span class="string">'@ionic/storage'</span>;</span><br><span class="line"></span><br><span class="line">@NgModule(&#123;</span><br><span class="line">  declarations: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  ],</span><br><span class="line">  imports: [</span><br><span class="line">    BrowserModule,</span><br><span class="line">    IonicModule.forRoot(MyApp),</span><br><span class="line">    IonicStorageModule.forRoot()</span><br><span class="line">  ],</span><br><span class="line">  bootstrap: [IonicApp],</span><br><span class="line">  entryComponents: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  ],</span><br><span class="line">  providers: [</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AppModule</span> </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. 在你的页面中使用</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Storage &#125; <span class="keyword">from</span> <span class="string">'@ionic/storage'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">MyApp</span> </span>&#123;</span><br><span class="line">  <span class="keyword">constructor</span>(private storage: Storage) &#123; &#125;</span><br><span class="line"></span><br><span class="line">  ...</span><br><span class="line"></span><br><span class="line">  <span class="comment">// set a key/value</span></span><br><span class="line">  storage.set(<span class="string">'name'</span>, <span class="string">'Max'</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Or to get a key/value pair</span></span><br><span class="line">  storage.get(<span class="string">'age'</span>).then(<span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'Your age is'</span>, val);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="5-3-二维码扫描"><a href="#5-3-二维码扫描" class="headerlink" title="5.3 二维码扫描"></a>5.3 二维码扫描</h2><blockquote>
<p><a href="https://ionicframework.com/docs/native/qr-scanner" target="_blank" rel="noopener">https://ionicframework.com/docs/native/qr-scanner</a></p>
</blockquote>
<p><strong>1. 安装插件</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 安装插件</span></span><br><span class="line">$ ionic cordova plugin add cordova-plugin-qrscanner</span><br><span class="line">$ npm install --save @ionic-native/qr-scanner</span><br></pre></td></tr></table></figure>
<p><strong>2. 在<code>src/app/app.module.ts</code>中导入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; QRScanner, QRScannerStatus &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/qr-scanner'</span>;</span><br><span class="line"></span><br><span class="line">  providers: [</span><br><span class="line">    StatusBar,</span><br><span class="line">    SplashScreen,</span><br><span class="line">    &#123;<span class="attr">provide</span>: ErrorHandler, <span class="attr">useClass</span>: IonicErrorHandler&#125;,</span><br><span class="line">    QRScanner <span class="comment">// 导入插件</span></span><br><span class="line">  ]</span><br></pre></td></tr></table></figure>
<p><strong>3. 在页面中使用</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 新建扫描页面</span></span><br><span class="line">ionic g page scan</span><br></pre></td></tr></table></figure>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** scan.scss **/</span></span><br><span class="line">page-scan &#123;</span><br><span class="line"><span class="selector-tag">html</span>,</span><br><span class="line"><span class="selector-tag">body</span>,</span><br><span class="line">ion-app,</span><br><span class="line">ion-<span class="attribute">content</span>,</span><br><span class="line">ion-page,</span><br><span class="line"><span class="selector-class">.nav-decor</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.line</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">z-index</span>: <span class="number">999999</span>;</span><br><span class="line">  <span class="attribute">top</span>: <span class="number">15px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">2px</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#009900</span>; <span class="comment">//动画</span></span><br><span class="line">  <span class="attribute">animation</span>: scan <span class="number">1s</span> infinite alternate;</span><br><span class="line">  -webkit-<span class="attribute">animation</span>: scan <span class="number">1s</span> infinite alternate;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">@keyframes</span> scan &#123;</span><br><span class="line">  from &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">20%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  to &#123;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">80%</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--scan.html--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-navbar</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-title</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-navbar</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-header</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"line"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// scan.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; Component &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; IonicPage, NavController, NavParams, AlertController &#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; QRScanner, QRScannerStatus &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/qr-scanner'</span>;</span><br><span class="line"></span><br><span class="line">@Component(&#123;</span><br><span class="line">  selector: <span class="string">'page-scan'</span>,</span><br><span class="line">  templateUrl: <span class="string">'scan.html'</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">ScanPage</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(public navCtrl: NavController,</span><br><span class="line">    public navParams: NavParams,</span><br><span class="line">    public alertCtrl: AlertController,</span><br><span class="line">    public qrScanner: QRScanner) &#123;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  ionViewDidLoad() &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'ionViewDidLoad ScanPage'</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  ionViewDidEnter() &#123;</span><br><span class="line">    <span class="keyword">this</span>.scanQRCode();</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  scanQRCode() &#123;</span><br><span class="line">    <span class="keyword">this</span>.qrScanner.prepare()</span><br><span class="line">      .then(<span class="function">(<span class="params">status: QRScannerStatus</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (status.authorized) &#123;</span><br><span class="line">          <span class="built_in">window</span>.document.querySelector(<span class="string">'body'</span>).classList.add(<span class="string">'transparent-body'</span>);</span><br><span class="line">          <span class="keyword">let</span> scanSub = <span class="keyword">this</span>.qrScanner.scan().subscribe(<span class="function">(<span class="params">text: string</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">let</span> alert = <span class="keyword">this</span>.alertCtrl.create(&#123;</span><br><span class="line">              title: <span class="string">'二维码内容'</span>,</span><br><span class="line">              subTitle: text,</span><br><span class="line">              buttons: [<span class="string">'OK'</span>]</span><br><span class="line">            &#125;);</span><br><span class="line">            alert.present();</span><br><span class="line">            scanSub.unsubscribe();</span><br><span class="line">          &#125;);</span><br><span class="line"></span><br><span class="line">          <span class="keyword">this</span>.qrScanner.show();</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> <span class="keyword">if</span> (status.denied) &#123;</span><br><span class="line">          <span class="comment">//提醒用户权限没有开</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">else</span> &#123;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">      .catch(<span class="function">(<span class="params">e: any</span>) =&gt;</span> <span class="built_in">console</span>.error(<span class="string">'Error :'</span>, e));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>4. 调用scan页面</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">ion-item</span> (<span class="attr">click</span>)=<span class="string">"gotoScanQRCode()"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">name</span>=<span class="string">"qr-scanner"</span> <span class="attr">item-start</span> <span class="attr">color</span>=<span class="string">"dark"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-label</span>&gt;</span>扫描二维码<span class="tag">&lt;/<span class="name">ion-label</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ScanPage &#125; <span class="keyword">from</span> <span class="string">'../scan/scan'</span>; <span class="comment">// 引入新建的扫描页面</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span>(public navCtrl: NavController, </span><br><span class="line">  public navParams: NavParams) &#123;</span><br><span class="line">    <span class="keyword">super</span>()</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 跳转到二维码扫描界面，加上'animate': false参数是为了相机能够在整个屏幕显示，否则相机出不来</span></span><br><span class="line">gotoScanQRCode() &#123;</span><br><span class="line">  <span class="keyword">this</span>.navCtrl.push(ScanPage, <span class="literal">null</span>, &#123;<span class="string">'animate'</span>: <span class="literal">false</span>&#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="5-4-读取版本信息"><a href="#5-4-读取版本信息" class="headerlink" title="5.4 读取版本信息"></a>5.4 读取版本信息</h2><blockquote>
<p><a href="https://ionicframework.com/docs/native/app-version" target="_blank" rel="noopener">https://ionicframework.com/docs/native/app-version</a></p>
</blockquote>
<p><strong>1. 安装插件</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">$ ionic cordova plugin add cordova-plugin-app-version</span><br><span class="line">$ npm install --save @ionic-native/app-version</span><br></pre></td></tr></table></figure>
<p><strong>导入app.module.ts</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; AppVersion &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/app-version'</span>;</span><br><span class="line">providers: [</span><br><span class="line">    AppVersion</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<p><strong>2. 新建一个页面展示version</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic g page versions</span><br></pre></td></tr></table></figure>
<p><strong>3. 在app.modules.ts中导入</strong></p>
<p><strong>4. version页面配置</strong></p>
<blockquote>
<p>在浏览器中不可以调试，需要真机调试</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-header</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-navbar</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-title</span>&gt;</span>版本信息<span class="tag">&lt;/<span class="name">ion-title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ion-navbar</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-header</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-content</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-list</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">      AppName: &#123;&#123;appName&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">      PackageName: &#123;&#123;packageName&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">      VersionCode: &#123;&#123;versionCode&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">      VersionNumber: &#123;&#123;versionNumber&#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ion-list</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-content</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Component &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; IonicPage, NavController, NavParams &#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; AppVersion &#125; <span class="keyword">from</span> <span class="string">'@ionic-native/app-version'</span>;</span><br><span class="line"></span><br><span class="line">@Component(&#123;</span><br><span class="line">  selector: <span class="string">'page-versions'</span>,</span><br><span class="line">  templateUrl: <span class="string">'versions.html'</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">VersionsPage</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  appName: string;</span><br><span class="line">  packageName: string;</span><br><span class="line">  versionCode: string;</span><br><span class="line">  versionNumber: string;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(public navCtrl: NavController,</span><br><span class="line">    private appVersion: AppVersion,</span><br><span class="line">    public navParams: NavParams) &#123;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  ionViewDidLoad() &#123;</span><br><span class="line">    <span class="keyword">this</span>.appVersion.getAppName().then(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.appName = v;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.appVersion.getPackageName().then(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.packageName = v;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.appVersion.getVersionCode().then(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.versionCode = v;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.appVersion.getVersionNumber().then(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">this</span>.versionNumber = v;</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>5. 其他组件中使用</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">ion-item</span> (<span class="attr">click</span>)=<span class="string">"gotoVersions()"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">name</span>=<span class="string">"help-circle"</span> <span class="attr">item-start</span> <span class="attr">color</span>=<span class="string">"dark"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-label</span>&gt;</span>关于<span class="tag">&lt;/<span class="name">ion-label</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">gotoVersions()&#123;</span><br><span class="line">  <span class="keyword">this</span>.navCtrl.push(newPage)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="六、页面之间的传参"><a href="#六、页面之间的传参" class="headerlink" title="六、页面之间的传参"></a>六、页面之间的传参</h1><h2 id="6-1-js跳转方式"><a href="#6-1-js跳转方式" class="headerlink" title="6.1 js跳转方式"></a>6.1 js跳转方式</h2><blockquote>
<p>路由跳转通过<code>NavController</code></p>
</blockquote>
<p><strong>1. 导入NavController</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; NavController&#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br></pre></td></tr></table></figure>
<p><strong>2. 注入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(public navCtrl: NavController) &#123;&#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. 传参</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 参数可以说任意 这里对象形式</span></span><br><span class="line"><span class="keyword">this</span>.navCtrl.push(DetailsPage, &#123;<span class="attr">id</span>: questionId&#125;)</span><br></pre></td></tr></table></figure>
<blockquote>
<p><code>navCtrl</code>传参和<code>ModalCtr</code>传参一样 </p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">this</span>.ModalCtrl.create(AnswerPage, &#123;</span><br><span class="line">  id: <span class="keyword">this</span>.id</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>4. 接收参数</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">public id:string;</span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span>(public navCtrl: NavController, public navParams: NavParams) &#123;</span><br><span class="line">  <span class="keyword">this</span>.id = navParams.get(<span class="string">'id'</span>) <span class="comment">// 接收传递过来的参数</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 或者这样写</span></span><br><span class="line">ionViewDidLoad()&#123;</span><br><span class="line">   <span class="keyword">this</span>.id = <span class="keyword">this</span>.navParams.get(<span class="string">'id'</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="6-2-HTML传参"><a href="#6-2-HTML传参" class="headerlink" title="6.2 HTML传参"></a>6.2 HTML传参</h2><p><strong>1. 传参</strong></p>
<blockquote>
<p>通过<code>[navPush]</code>打开新页面，<code>[navParams]</code>传递参数。<a href="https://ionicframework.com/docs/api/components/nav/NavPush" target="_blank" rel="noopener">navPush文档</a></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ChatdetailsPage &#125; <span class="keyword">from</span> <span class="string">'../chatdetails/chatdetails'</span> <span class="comment">// 1.导入页面</span></span><br><span class="line"></span><br><span class="line">public ChatdetailsPage: any; <span class="comment">// 2. 声明类型</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">constructor</span>()&#123;</span><br><span class="line">    userinfo = &#123;</span><br><span class="line">        userId: <span class="string">'1234'</span>,</span><br><span class="line">        username: <span class="string">'poetries'</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.ChatdetailsPage = ChatdetailsPage; <span class="comment">// 3. </span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--4. 使用--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-item</span> [<span class="attr">navPush</span>]=<span class="string">"ChatdetailsPage"</span> [<span class="attr">navParams</span>]=<span class="string">"userinfo"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-avatar</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://blog.poetries.top/images/avatar.jpg"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ion-avatar</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h2</span>&gt;</span>poetries<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>聊天组件开发<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>2. 获取传递的参数</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(public navCtrl: NavController, public navParams: NavParams) &#123;</span><br><span class="line">  <span class="keyword">this</span>.username = navParams.get(<span class="string">'username'</span>)</span><br><span class="line">  <span class="keyword">this</span>.userid = navParams.get(<span class="string">'userid'</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="七、管道的使用"><a href="#七、管道的使用" class="headerlink" title="七、管道的使用"></a>七、管道的使用</h1><p><strong>1. 新建管道</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ionic g pipe realativetime # 管道名称</span><br></pre></td></tr></table></figure>
<p><strong>2. 配置</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Pipe, PipeTransform &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> moment <span class="keyword">from</span> <span class="string">'moment'</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Generated class for the RelativetimePipe pipe.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * See https://angular.io/api/core/Pipe for more info on Angular Pipes.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">@Pipe(&#123;</span><br><span class="line">  name: <span class="string">'relativetime'</span>,</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">RelativetimePipe</span> <span class="title">implements</span> <span class="title">PipeTransform</span> </span>&#123;</span><br><span class="line">  <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * Takes a value and makes it lowercase.</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  transform(value: string, ...args) &#123;</span><br><span class="line">    <span class="keyword">return</span> moment(value).toNow() <span class="comment">// 将过去时间变成距离现在多久</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. src/App/modules.ts中全局导入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; RelativetimePipe &#125; <span class="keyword">from</span> <span class="string">'../pipes/relativetime/relativetime'</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">@NgModule(&#123;</span><br><span class="line">  declarations: [</span><br><span class="line">    RelativetimePipe</span><br><span class="line">  ]</span><br><span class="line">...</span><br></pre></td></tr></table></figure>
<p><strong>4. 使用</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--relativetime管道名称--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"msg-info"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;msg.username&#125;&#125;<span class="symbol">&amp;nbsp;</span>&#123;&#123;msg.time | relativetime&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">```    </span><br><span class="line"></span><br><span class="line"># 八、Theme主题全局样式</span><br><span class="line"></span><br><span class="line">## 8.1 全局图标颜色配置</span><br><span class="line"></span><br><span class="line">**1. `theme/variables.scss`中定义**</span><br><span class="line"></span><br><span class="line">```scss</span><br><span class="line">$colors: (</span><br><span class="line">  primary:    #488aff, /**蓝色。优先匹配**/</span><br><span class="line">  secondary:  #32db64, /**第二匹配**/</span><br><span class="line">  danger:     #f53d3d, /**第三匹配**/</span><br><span class="line">  light:      #f4f4f4,</span><br><span class="line">  dark:       #222</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p><strong>2. 使用</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--在color上使用primary--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">name</span>=<span class="string">"paper"</span> <span class="attr">item-start</span> <span class="attr">color</span>=<span class="string">"primary"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/250.png" alt></p>
<h2 id="8-2-自定义样式"><a href="#8-2-自定义样式" class="headerlink" title="8.2 自定义样式"></a>8.2 自定义样式</h2><blockquote>
<p>定义两套样式</p>
</blockquote>
<blockquote>
<p>在<code>theme</code>中新建<code>light.scss</code>。在<code>variables.scss</code>中导入</p>
</blockquote>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 自定义样式</span></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"light"</span>;</span><br></pre></td></tr></table></figure>
<h2 id="8-3-全局设置夜间模式切换"><a href="#8-3-全局设置夜间模式切换" class="headerlink" title="8.3 全局设置夜间模式切换"></a>8.3 全局设置夜间模式切换</h2><p><strong>1. 在<code>theme</code>中新建<code>theme.dark.scss</code>。在<code>variables.scss</code>中导入 </strong></p>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 根据dark-theme 作用域切换主题 **/</span></span><br><span class="line"><span class="selector-class">.dark-theme</span> &#123;</span><br><span class="line">    ion-<span class="attribute">content</span>,<span class="selector-class">.card</span>,<span class="selector-class">.floatMenu</span> &#123;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="number">#1e2446</span> <span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  </span><br><span class="line">    <span class="selector-class">.toolbar-title</span> &#123;</span><br><span class="line">      <span class="attribute">color</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">   </span><br><span class="line">    <span class="selector-class">.header</span> <span class="selector-class">.toolbar-background</span> &#123;</span><br><span class="line">      <span class="attribute">border-color</span>: <span class="number">#140414</span> <span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="number">#3a3c4b</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  </span><br><span class="line">    <span class="selector-class">.list</span>,<span class="selector-class">.label</span>,<span class="selector-class">.item</span>&#123;</span><br><span class="line">      <span class="attribute">background-color</span>: <span class="number">#3a3c4b</span> <span class="meta">!important</span>;</span><br><span class="line">      <span class="attribute">color</span>:<span class="number">#FFFFFF</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.item</span>&#123;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">0.55px</span> solid <span class="number">#2e2749</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.item-inner</span>,&#123;</span><br><span class="line">      <span class="attribute">border</span>: none <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="selector-class">.item-block</span>&#123;</span><br><span class="line">      <span class="attribute">border-bottom</span>: <span class="number">0.55px</span> solid <span class="number">#2e2749</span> <span class="meta">!important</span>;</span><br><span class="line">    &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p><strong>2. 在<code>theme</code>中新建<code>theme.light.scss</code>。在<code>variables.scss</code>中导入</strong></p>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.light-theme</span> &#123;</span><br><span class="line">    ion-<span class="attribute">content</span> &#123;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#e3e4e7</span></span><br><span class="line">      &#125;</span><br><span class="line">     </span><br><span class="line">      .toolbar-background &#123;</span><br><span class="line">        background-color: <span class="number">#fff</span>;</span><br><span class="line">      &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. 在<code>variables.scss</code>中导入</strong></p>
<figure class="highlight scss"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 这里导入的是两套主题样式 **/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">@import</span> <span class="string">"theme.light"</span>;</span><br><span class="line"><span class="keyword">@import</span> <span class="string">"theme.dark"</span>;</span><br></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-list</span> <span class="attr">class</span>=<span class="string">"marginTop"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-list-header</span>&gt;</span></span><br><span class="line">   设置</span><br><span class="line">  <span class="tag">&lt;/<span class="name">ion-list-header</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">name</span>=<span class="string">"cloudy-night"</span> <span class="attr">item-start</span> <span class="attr">color</span>=<span class="string">"purple"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-label</span>&gt;</span>夜间模式<span class="tag">&lt;/<span class="name">ion-label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-toggle</span> <span class="attr">color</span>=<span class="string">"purple"</span> (<span class="attr">ionChange</span>)=<span class="string">"toggleChangeTheme()"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-toggle</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-list</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>4. 新建一个provider来控制app主题的切换</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">ionic provider settings</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// settings.ts</span></span><br><span class="line"><span class="keyword">import</span> &#123; HttpClient &#125; <span class="keyword">from</span> <span class="string">'@angular/common/http'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; Injectable &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; BehaviorSubject &#125; <span class="keyword">from</span> <span class="string">'rxjs/Rx'</span></span><br><span class="line"></span><br><span class="line">@Injectable()</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">SettingsProvider</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  private theme: BehaviorSubject&lt;string&gt;</span><br><span class="line">  <span class="keyword">constructor</span>(public http: HttpClient) &#123;</span><br><span class="line">    <span class="keyword">this</span>.theme = <span class="keyword">new</span> BehaviorSubject(<span class="string">'light-theme'</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  setActiveTheme(val) &#123;</span><br><span class="line">    <span class="keyword">this</span>.theme.next(val)</span><br><span class="line">  &#125;</span><br><span class="line">  getActiveTheme() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.theme.asObservable()</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>5. 在<code>app.component.ts</code>中设置</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/251.png" alt></p>
<p>然后在<code>src/app/app.html</code>中设置<code>selectedTheme</code></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-nav</span> [<span class="attr">root</span>]=<span class="string">"rootPage"</span> [<span class="attr">class</span>]=<span class="string">"selectedTheme"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-nav</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>6. 在对应组件页面中设置</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 1. 引入settings providers</span></span><br><span class="line"><span class="keyword">import</span> &#123; SettingsProvider &#125; <span class="keyword">from</span> <span class="string">'../../providers/settings/settings'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">UserCenterPage</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2. 定义变量</span></span><br><span class="line">  public selectedTheme: string;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(public navCtrl: NavController, </span><br><span class="line">                      public navParams: NavParams,</span><br><span class="line">                      // 3. 注入</span><br><span class="line">                      public settings: SettingsProvider</span><br><span class="line">                      public ModalCtrl: ModalController ) &#123;</span><br><span class="line">                        <span class="keyword">super</span>()</span><br><span class="line">                        </span><br><span class="line">                         <span class="comment">// 4. 获取主题</span></span><br><span class="line">                        <span class="keyword">this</span>.settings.getActiveTheme().subscribe(<span class="function"><span class="params">val</span> =&gt;</span> <span class="keyword">this</span>.selectedTheme = val)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 5.切换主题</span></span><br><span class="line">  toggleChangeTheme() &#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">this</span>.selectedTheme == <span class="string">'dark-theme'</span>) &#123;</span><br><span class="line">      <span class="keyword">this</span>.settings.setActiveTheme(<span class="string">'light-theme'</span>)</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.settings.setActiveTheme(<span class="string">'dark-theme'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>7. 在整个app启动的时候设置夜间或者白天模式</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/252.png" alt></p>
<h1 id="九、组件化开发-自定义组件"><a href="#九、组件化开发-自定义组件" class="headerlink" title="九、组件化开发-自定义组件"></a>九、组件化开发-自定义组件</h1><h2 id="9-1-自定义组件"><a href="#9-1-自定义组件" class="headerlink" title="9.1 自定义组件"></a>9.1 自定义组件</h2><p><strong>1. 新建组件</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 新建组件</span></span><br><span class="line"></span><br><span class="line">ionic g component emojipicker<span class="comment"># 组件名称</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/253.png" alt></p>
<p><strong>2. 在src/app/app.module.ts中导入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; ComponentsModule &#125; <span class="keyword">from</span> <span class="string">'../components/components.module'</span></span><br><span class="line"></span><br><span class="line">@NgModule(&#123;</span><br><span class="line">  declarations: [</span><br><span class="line">  </span><br><span class="line">  ],</span><br><span class="line">  imports: [</span><br><span class="line">  BrowserModule,</span><br><span class="line">    HttpClientModule,</span><br><span class="line">    ComponentsModule, <span class="comment">// 导入自定义组件</span></span><br><span class="line">    IonicStorageModule.forRoot()</span><br><span class="line">  ],</span><br><span class="line">  bootstrap: [IonicApp],</span><br><span class="line">  entryComponents: [</span><br><span class="line">  ],</span><br><span class="line">  providers: [</span><br><span class="line">    StatusBar,</span><br><span class="line">    SplashScreen,</span><br><span class="line">    &#123;<span class="attr">provide</span>: ErrorHandler, <span class="attr">useClass</span>: IonicErrorHandler&#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AppModule</span> </span>&#123;&#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. 使用</strong></p>
<blockquote>
<p>在页面中使用即可</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/254.png" alt></p>
<p><strong>4. 组件通过@input()接收外部参数</strong></p>
<p><strong>4.1 定义组件</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; Component, Input &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// datatype 外部传递进来，dataSourceType 本地接收之后的参数命名</span></span><br><span class="line">@Input(<span class="string">'dataType'</span>) dataSourceType;</span><br><span class="line"></span><br><span class="line"><span class="comment">//这里没有 ionViewDidLoad 生命周期的函数</span></span><br><span class="line">ngAfterContentInit()&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="keyword">this</span>.dataSourceType) </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>4.2 使用组件</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!--dataType传递给question-list中的Input 接收--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">question-list</span> <span class="attr">dataType</span>=<span class="string">"&#123;&#123;dataType&#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">question-list</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="9-2-hidden-style-class-动态控制组件"><a href="#9-2-hidden-style-class-动态控制组件" class="headerlink" title="9.2 [hidden] [style] [class] 动态控制组件"></a>9.2 [hidden] [style] [class] 动态控制组件</h2><p><strong>1. 动态显示隐藏hidden</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-content</span> <span class="attr">padding</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;pathForImage(lastImage)&#125;&#125;"</span>  <span class="attr">class</span>=<span class="string">"img"</span> [<span class="attr">hidden</span>]=<span class="string">"lastImage === null"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h3</span> [<span class="attr">hidden</span>]=<span class="string">"lastImage !== null"</span>&gt;</span>请从图片库选择一个图片<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-content</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>2. 动态绑定style</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-footer</span> <span class="attr">no-border</span> [<span class="attr">style.height</span>]=<span class="string">"isOpenEmojiPicker ? '255px': '55px' "</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-footer</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>3. 动态绑定class属性</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"message right"</span> </span></span><br><span class="line"><span class="tag">    *<span class="attr">ngFor</span>=<span class="string">"let msg of messageList"</span></span></span><br><span class="line"><span class="tag">    [<span class="attr">class.right</span>] = <span class="string">"msg.userId === userId"</span></span></span><br><span class="line"><span class="tag">    [<span class="attr">class.left</span>] = <span class="string">"msg.userId === chatUserId"</span></span></span><br><span class="line"><span class="tag">&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h1 id="十、指令"><a href="#十、指令" class="headerlink" title="十、指令"></a>十、指令</h1><blockquote>
<p>采用了<code>angular</code>语法 <a href="http://blog.poetries.top/2019/01/09/angular7-intro-summary/#3-5-%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF-ngFor">建议参考这篇文章</a></p>
</blockquote>
<h1 id="十一、常用组件使用"><a href="#十一、常用组件使用" class="headerlink" title="十一、常用组件使用"></a>十一、常用组件使用</h1><blockquote>
<p>组件文档 <a href="https://ionicframework.com/docs/components" target="_blank" rel="noopener">https://ionicframework.com/docs/components</a></p>
</blockquote>
<h2 id="11-1-ModalController-LoadingController-ToastController"><a href="#11-1-ModalController-LoadingController-ToastController" class="headerlink" title="11.1 ModalController/LoadingController/ToastController"></a>11.1 ModalController/LoadingController/ToastController</h2><p><strong>1. 导入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;ModalController, LoadingController,  ToastController, ViewController&#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br></pre></td></tr></table></figure>
<p><strong>2. 注入</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">constructor</span>(</span><br><span class="line">   public loadingCtr: LoadingController,</span><br><span class="line">   public viewCtr: ViewController,</span><br><span class="line">   public toastCtrl: ToastController,</span><br><span class="line">   public ModalCtrl: ModalController </span><br><span class="line"> ) &#123;</span><br><span class="line">     </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>3. 使用</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// loading使用</span></span><br><span class="line"><span class="keyword">let</span> loader = loadingCtr.create(&#123;</span><br><span class="line">    content: message, <span class="comment">// 加载的内容</span></span><br><span class="line">    dismissOnPageChange: <span class="literal">true</span> </span><br><span class="line">&#125;)</span><br><span class="line">loader.present() <span class="comment">// // 触发生效</span></span><br><span class="line">loading.dismiss() <span class="comment">// 关闭loading</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">// toastCtrl使用</span></span><br><span class="line"><span class="keyword">let</span> toast = toastCtrl.create(&#123;</span><br><span class="line">    message, <span class="comment">// 提示的信息</span></span><br><span class="line">    duration: <span class="number">3000</span>, <span class="comment">// 间隔时间</span></span><br><span class="line">    position: <span class="string">'bottom'</span> <span class="comment">// top buttom left right</span></span><br><span class="line">&#125;)</span><br><span class="line">toast.present() <span class="comment">// 触发生效</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ModalController </span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> modal = <span class="keyword">this</span>.ModalCtrl.create(QuestionPage) <span class="comment">// 弹出的页面</span></span><br><span class="line">modal.present() <span class="comment">// 生效</span></span><br><span class="line"><span class="comment">// 关闭后进行父页面刷新</span></span><br><span class="line">modal.onDidDismiss(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 刷新页面</span></span><br><span class="line">    <span class="keyword">this</span>.loadPage()</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// viewCtr</span></span><br><span class="line"><span class="comment">// 关闭当前页面</span></span><br><span class="line"><span class="keyword">this</span>.viewCtr.dismiss()</span><br></pre></td></tr></table></figure>
<p><strong>4. 封装loading, toast</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// common/baseui</span></span><br><span class="line"><span class="keyword">import</span> &#123; Loading, LoadingController, ToastController, Toast&#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> abstract <span class="class"><span class="keyword">class</span> <span class="title">BaseUI</span> </span>&#123;</span><br><span class="line"><span class="keyword">constructor</span>() &#123;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">protected showLoading(loadingCtr: LoadingController, <span class="attr">message</span>: string): Loading &#123;</span><br><span class="line">    <span class="keyword">let</span> loader = loadingCtr.create(&#123;</span><br><span class="line">        content: message,</span><br><span class="line">        dismissOnPageChange: <span class="literal">true</span></span><br><span class="line">    &#125;)</span><br><span class="line">    loader.present()</span><br><span class="line">    <span class="keyword">return</span> loader</span><br><span class="line">&#125;</span><br><span class="line">protected showToast(toastCtrl: ToastController, <span class="attr">message</span>: string):Toast &#123;</span><br><span class="line">    <span class="keyword">let</span> toast = toastCtrl.create(&#123;</span><br><span class="line">        message,</span><br><span class="line">        duration: <span class="number">3000</span>,</span><br><span class="line">        position: <span class="string">'bottom'</span></span><br><span class="line">    &#125;)</span><br><span class="line">    toast.present()</span><br><span class="line">    <span class="keyword">return</span> toast</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 使用</span></span><br><span class="line"><span class="keyword">import</span> &#123; Component &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ModalController, LoadingController,  ToastController&#125; <span class="keyword">from</span> <span class="string">'ionic-angular'</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; ApiProvider &#125; <span class="keyword">from</span> <span class="string">'../../providers/api/api'</span></span><br><span class="line"><span class="keyword">import</span> &#123; BaseUI &#125; <span class="keyword">from</span> <span class="string">'../../common/baseui'</span> <span class="comment">// 1.导入封装的组件</span></span><br><span class="line"></span><br><span class="line">@Component(&#123;</span><br><span class="line">  selector: <span class="string">'page-home'</span>,</span><br><span class="line">  templateUrl: <span class="string">'home.html'</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">HomePage</span> <span class="keyword">extends</span> <span class="title">BaseUI</span> </span>&#123; <span class="comment">// 2. 继承BaseUI</span></span><br><span class="line"></span><br><span class="line">  feeds: string[];</span><br><span class="line">  errorMessage: string;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">constructor</span>(</span><br><span class="line">    public loadingCtr: LoadingController, // 3. 构造</span><br><span class="line">    public api: ApiProvider,</span><br><span class="line">    public toastCtrl: ToastController,  // 3. 构造</span><br><span class="line">    public ModalCtrl: ModalController </span><br><span class="line">    ) &#123;</span><br><span class="line">      <span class="keyword">super</span>() <span class="comment">// 调用子类方法</span></span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  getFeeds() &#123;</span><br><span class="line">    <span class="keyword">let</span> loading = <span class="keyword">super</span>.showLoading(<span class="keyword">this</span>.loadingCtr, <span class="string">'加载中...'</span>) <span class="comment">// 4. 使用loading</span></span><br><span class="line">    <span class="keyword">this</span>.api.getFeeds().subscribe(<span class="function"><span class="params">data</span>=&gt;</span>&#123;</span><br><span class="line">    </span><br><span class="line">      <span class="keyword">if</span>(data[<span class="string">'UserId'</span>]) &#123;</span><br><span class="line">        <span class="keyword">this</span>.feeds = data</span><br><span class="line">        loading.dismiss() <span class="comment">// 关闭loading</span></span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="comment">// 5. 使用toast</span></span><br><span class="line">        <span class="keyword">super</span>.showToast(<span class="keyword">this</span>.toastCtrl, data[<span class="string">'StatusContent'</span>])</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,err=&gt;<span class="keyword">this</span>.errorMessage = <span class="xml"><span class="tag">&lt;<span class="name">any</span>&gt;</span>err)</span></span><br><span class="line"><span class="xml">  &#125;</span></span><br><span class="line"><span class="xml">&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="11-2-Refresh组件"><a href="#11-2-Refresh组件" class="headerlink" title="11.2 Refresh组件"></a>11.2 Refresh组件</h2><blockquote>
<p><a href="https://ionicframework.com/docs/api/components/refresher/Refresher/" target="_blank" rel="noopener">刷新组件</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-content</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--刷新组件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-refresher</span> (<span class="attr">ionRefresh</span>)=<span class="string">"doRefresh($event)"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ion-refresher-content</span></span></span><br><span class="line"><span class="tag">         <span class="attr">pullingIcon</span>=<span class="string">"arrow-down"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">pullingText</span>=<span class="string">"下拉刷新"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">refreshingSpinner</span>=<span class="string">"circles"</span></span></span><br><span class="line"><span class="tag">         <span class="attr">refreshingText</span>=<span class="string">"数据加载中..."</span></span></span><br><span class="line"><span class="tag">       &gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ion-refresher-content</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-refresher</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-card</span> *<span class="attr">ngFor</span>=<span class="string">"let q of questions"</span> (<span class="attr">click</span>)=<span class="string">"gotoDetails(q.IdentityId)"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">ion-avatar</span> <span class="attr">item-start</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;q.HeadFace&#125;&#125;"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">ion-avatar</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">              &#123;&#123;q.UserNickName&#125;&#125;发布了该问题</span><br><span class="line">            <span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">class</span>=<span class="string">"more-button"</span> <span class="attr">name</span>=<span class="string">"more"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;q.ContentTitle&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ion-card-content</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;q.ContentSummary&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ion-card-content</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ion-row</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">ion-col</span> <span class="attr">col-8</span> <span class="attr">center</span> <span class="attr">text-left</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ion-note</span>&gt;</span></span><br><span class="line">                &#123;&#123;q.LikeCount&#125;&#125;<span class="symbol">&amp;nbsp;</span>赞同<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>.<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>&#123;&#123;q.CommentCount&#125;&#125;<span class="symbol">&amp;nbsp;</span>评论<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>.<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>关注</span><br><span class="line">            <span class="tag">&lt;/<span class="name">ion-note</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">ion-col</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">ion-col</span> <span class="attr">col-4</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-col</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ion-row</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ion-card</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-content</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">doRefresh(refresher) &#123;</span><br><span class="line">    <span class="keyword">this</span>.getQuestions() <span class="comment">// 再次请求数据</span></span><br><span class="line">    refresher.complete() <span class="comment">// 停止刷新</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="11-3-List组件"><a href="#11-3-List组件" class="headerlink" title="11.3 List组件"></a>11.3 List组件</h2><blockquote>
<p><a href="https://ionicframework.com/docs/components/#lists" target="_blank" rel="noopener">https://ionicframework.com/docs/components/#lists</a></p>
</blockquote>
<h2 id="11-4-button组件"><a href="#11-4-button组件" class="headerlink" title="11.4 button组件"></a>11.4 button组件</h2><blockquote>
<p><a href="https://ionicframework.com/docs/components/#buttons" target="_blank" rel="noopener">https://ionicframework.com/docs/components/#buttons</a></p>
</blockquote>
<h2 id="11-5-card组件"><a href="#11-5-card组件" class="headerlink" title="11.5 card组件"></a>11.5 card组件</h2><blockquote>
<p><a href="https://ionicframework.com/docs/components/#cards" target="_blank" rel="noopener">https://ionicframework.com/docs/components/#cards</a></p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ion-card</span> *<span class="attr">ngFor</span>=<span class="string">"let f of feeds"</span> (<span class="attr">click</span>)=<span class="string">"gotoDetails(f.IdentityId)"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-item</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ion-avatar</span> <span class="attr">item-start</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"&#123;&#123;f.HeadFace&#125;&#125;"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ion-avatar</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">          &#123;&#123;f.UserNickName&#125;&#125;回答了该问题</span><br><span class="line">        <span class="tag">&lt;<span class="name">ion-icon</span> <span class="attr">class</span>=<span class="string">"more-button"</span> <span class="attr">name</span>=<span class="string">"more"</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-icon</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-item</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>&#123;&#123;f.ContentTitle&#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-card-content</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123;f.ContentSummary&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-card-content</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ion-row</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ion-col</span> <span class="attr">col-8</span> <span class="attr">center</span> <span class="attr">text-left</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ion-note</span>&gt;</span></span><br><span class="line">            &#123;&#123;f.LikeCount&#125;&#125;<span class="symbol">&amp;nbsp;</span>赞同<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>.<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>&#123;&#123;f.CommentCount&#125;&#125;<span class="symbol">&amp;nbsp;</span>评论<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>.<span class="symbol">&amp;nbsp;</span><span class="symbol">&amp;nbsp;</span>关注</span><br><span class="line">        <span class="tag">&lt;/<span class="name">ion-note</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">ion-col</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">ion-col</span> <span class="attr">col-4</span>&gt;</span><span class="tag">&lt;/<span class="name">ion-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ion-row</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ion-card</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="11-6-表单组件"><a href="#11-6-表单组件" class="headerlink" title="11.6 表单组件"></a>11.6 表单组件</h2><blockquote>
<p><a href="https://ionicframework.com/docs/components/#inputs" target="_blank" rel="noopener">https://ionicframework.com/docs/components/#inputs</a></p>
</blockquote>
<h1 id="十二、Ionic打包上线流程"><a href="#十二、Ionic打包上线流程" class="headerlink" title="十二、Ionic打包上线流程"></a>十二、Ionic打包上线流程</h1><h2 id="12-1-图标生成"><a href="#12-1-图标生成" class="headerlink" title="12.1 图标生成"></a>12.1 图标生成</h2><blockquote>
<p>替换<code>resource/icon.png</code>图标为<code>1024*1024</code></p>
</blockquote>
<p><strong>生成图标</strong></p>
<blockquote>
<p>第一次生成，需要注册账号才可生成 <a href="https://dashboard.ionicframework.com/signup" target="_blank" rel="noopener">https://dashboard.ionicframework.com/signup</a></p>
</blockquote>
<blockquote>
<p>生成图标的过程可能需要翻墙</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/255.png" alt></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 在项目根目录执行 不需要进到resources文件夹</span></span><br><span class="line">ionic cordova resources</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/256.png" alt></p>
<h2 id="12-2-启动图生成"><a href="#12-2-启动图生成" class="headerlink" title="12.2 启动图生成"></a>12.2 启动图生成</h2><blockquote>
<p>替换resource/splash.png图标为1024*1024</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"># 在项目根目录执行 不需要进到resources文件夹</span><br><span class="line">ionic cordova resources</span><br></pre></td></tr></table></figure>
<h2 id="12-3-打包前细节处理"><a href="#12-3-打包前细节处理" class="headerlink" title="12.3 打包前细节处理"></a>12.3 打包前细节处理</h2><ol>
<li><strong>修改index.html中的title</strong></li>
<li><strong>修改config.xml</strong> 中的信息</li>
</ol>
<ul>
<li><code>widget id=&quot;io.ionic.starter&quot; version=&quot;0.0.1&quot;</code> 修改id（包名）以及<code>version</code></li>
<li><code>&lt;name&gt;MyApp&lt;/name&gt;</code> 修改<code>app</code>名字</li>
<li><code>&lt;description&gt;An awesome Ionic/Cordova app.&lt;/description&gt;</code> 修改<code>app</code>描述</li>
<li><code>&lt;author email=&quot;hi@ionicframework&quot; href=&quot;http://ionicframework.com/&quot;&gt;Ionic Framework Team&lt;/author&gt;</code> 修改<code>email</code></li>
</ul>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/257.png" alt></p>
<h2 id="12-4-打包部署"><a href="#12-4-打包部署" class="headerlink" title="12.4 打包部署"></a>12.4 打包部署</h2><figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 将所有的平台打包</span></span><br><span class="line">sudo ionic build</span><br></pre></td></tr></table></figure>
<p><strong>项目文件夹需要执行权限</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 这样才可以在xcode中打开调试</span></span><br><span class="line">sudo chomd 777 your_project_name</span><br></pre></td></tr></table></figure>
<blockquote>
<p>打开<code>xcode</code>进行<code>ios</code>下的调试</p>
</blockquote>
<h2 id="12-5-上架流程"><a href="#12-5-上架流程" class="headerlink" title="12.5 上架流程"></a>12.5 上架流程</h2><h3 id="12-5-1-IOS的打包"><a href="#12-5-1-IOS的打包" class="headerlink" title="12.5.1 IOS的打包"></a>12.5.1 IOS的打包</h3><p><img src="https://poetries1.gitee.io/img-repo/2019/10/258.png" alt></p>
<blockquote>
<p><code>app store</code>上架,需要注册开发者账号</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/259.png" alt></p>
<h3 id="12-5-2-安卓版本打包"><a href="#12-5-2-安卓版本打包" class="headerlink" title="12.5.2 安卓版本打包"></a>12.5.2 安卓版本打包</h3><blockquote>
<p>最后生成<code>apk</code>文件。</p>
</blockquote>
<p><strong>打包方式</strong></p>
<blockquote>
<ul>
<li>通过<code>Android studio</code>生成</li>
<li>通过命令生成</li>
</ul>
</blockquote>
<p><strong>1. 需要安装<code>jdk</code>环境，并设置环境变量</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># mac上安装</span></span><br><span class="line">brew install jdk java</span><br></pre></td></tr></table></figure>
<p><strong>2. 配置<code>Gradle</code></strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 打开 GradleBuilder.js</span></span><br><span class="line"></span><br><span class="line">platforms/android/cordova/lib/builders/GradleBuilder.js</span><br></pre></td></tr></table></figure>
<blockquote>
<p>找到<code>distributionUrl</code></p>
</blockquote>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> distributionUrl = process.env[<span class="string">'CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'</span>] || <span class="string">'https\\://services.gradle.org/distributions/gradle-4.1-all.zip'</span>;</span><br></pre></td></tr></table></figure>
<blockquote>
<ul>
<li>把这个资源下载下来(具体下载哪个版本，根据<code>distributionUrl</code>来下载)，放到<code>platforms/android/gradle</code></li>
<li>下载地址：<a href="https://services.gradle.org/distributions/gradle-4.1-all.zip" target="_blank" rel="noopener">https://services.gradle.org/distributions/gradle-4.1-all.zip</a></li>
</ul>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/300.png" alt></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 注释</span></span><br><span class="line"><span class="comment">// var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'https\\://services.gradle.org/distributions/gradle-4.1-all.zip';</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 新增</span></span><br><span class="line"><span class="keyword">var</span> distributionUrl = process.env[<span class="string">'CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'</span>] || <span class="string">'../gradle-4.1-all.zip'</span>;</span><br></pre></td></tr></table></figure>
<p><strong>3. 配置Gradle的环境变量</strong></p>
<p><strong>第一步</strong></p>
<blockquote>
<p>把上一步下载的<code>Gradle</code>把放到任意目录，这里我放的路径<code>/Users/poetry/cordova/gradle-4.1</code></p>
</blockquote>
<p><strong>第二步: 新增环境变量</strong></p>
<blockquote>
<p>在<code>mac</code>下编辑<code>.bash_profile</code>配置文件， <code>sudo vi  ~/.bash_profile</code>。新增一个环境变量，这里的<code>$HOME</code>就是<code>/Users/poetry</code>路径</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/310.png" alt></p>
<p><strong>第三步: 使环境变量生效</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br></pre></td></tr></table></figure>
<ul>
<li>如果你的终端使用<code>iTerm</code>，需要加载一条命令</li>
</ul>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">sudo vi ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment"># 新增</span></span><br><span class="line"><span class="built_in">source</span> .bash_profile</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/302.png" alt></p>
<p><strong>第四步：新开一个终端</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 执行下面命令看环境变量</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">echo</span> <span class="variable">$PATH</span></span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/303.png" alt></p>
<p><strong>第五步：测试</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">gradle -v</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/304.png" alt></p>
<p><strong>4. debug测试版打包</strong></p>
<blockquote>
<p>查看当前打包环境<code>ionic info</code></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">Ionic:</span><br><span class="line"></span><br><span class="line">   ionic (Ionic CLI)  : 4.7.1</span><br><span class="line">   Ionic Framework    : ionic-angular 3.9.2</span><br><span class="line">   @ionic/app-scripts : 3.2.1</span><br><span class="line"></span><br><span class="line">Cordova:</span><br><span class="line"></span><br><span class="line">   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)</span><br><span class="line">   Cordova Platforms     : android 7.1.4, browser 5.0.4, ios 4.5.5</span><br><span class="line">   Cordova Plugins       : cordova-plugin-ionic-webview 1.2.1, (and 11 other plugins)</span><br><span class="line"></span><br><span class="line">System:</span><br><span class="line"></span><br><span class="line">   Android SDK Tools : 26.1.1</span><br><span class="line">   NodeJS            : v9.10.0</span><br><span class="line">   npm               : 5.6.0</span><br><span class="line">   OS                : macOS Mojave</span><br><span class="line">   Xcode             : Xcode 10.1 Build version 10B61</span><br></pre></td></tr></table></figure>
<blockquote>
<p>注意：需要前面几步环境配置好了，才可以正常执行打包</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 执行这条命令默认打包的是debug版本</span></span><br><span class="line">cordova build android</span><br></pre></td></tr></table></figure>
<blockquote>
<p>打包后输出<code>apk</code>路径 <code>platforms/android/app/build/outputs/apk/debug/</code></p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/305.png" alt></p>
<blockquote>
<p>生成的<code>apk</code>。此时可以把<code>apk</code>，拖入<code>Genymotion</code>模拟器调试</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/306.png" alt></p>
<p><strong>5. 正式版本打包</strong></p>
<p><strong>5.1 未签名版本</strong></p>
<blockquote>
<p>此时打包的<code>apk</code>是没有签名的版本，不可以在手机上安装</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 生成未签名版</span></span><br><span class="line">ionic cordova build android  --release</span><br></pre></td></tr></table></figure>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/307.png" alt></p>
<blockquote>
<p>打包后输出<code>apk</code>路径 <code>platforms/android/app/build/outputs/apk/release</code></p>
</blockquote>
<blockquote>
<p>在手机安装示意图，签名版不能安装</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/308.png" alt></p>
<p><strong>5.2 签名版本apk打包</strong></p>
<p><strong>签名步骤</strong></p>
<p><strong>1. 创建私钥，项目根目录下执行命令(记住设置的别名)</strong></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">keytool -genkey -v -keystore [自定义秘钥文件名，如 my-app].jks -keyalg RSA -keysize 2048 -validity 36500 -alias [自定义app别名，如 my-alias]</span><br></pre></td></tr></table></figure>
<ul>
<li><code>-genkey</code>        意味着执行的是生成数字证书操作</li>
<li><code>v</code>            表示将生成证书的详细信息打印出来，显示在<code>dos</code>窗口中</li>
<li><code>-keyalg RSA</code>        表示生成密钥文件所采用的算法为<code>RSA</code></li>
<li><code>-validity 36500</code>        表示该数字证书的有效期为<code>36500</code>天</li>
</ul>
<p><strong>2. 接下来会让设置秘钥库口令(记住秘钥)：</strong></p>
<blockquote>
<p>秘钥库就是你的密码</p>
</blockquote>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/309.png" alt></p>
<p><strong>3. 设置秘钥库口令后会让输入一些APP信息</strong></p>
<p><img src="https://poetries1.gitee.io/img-repo/2019/10/310.png" alt></p>
<p><strong>4. 按照提示依次输入后会在你的项目根目录生成秘钥文件 my-app.jks</strong></p>
<blockquote>
<p>把之前生成好的<code>platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk</code>复制到项目根目录，这样和<code>my-app.jks</code>同一目录签名</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [上步生成的xxx.jks] app-release-unsigned.apk [步骤1命令中设置的app别名，如 my-alias]</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 这里是上面的示例：执行签名命令</span></span><br><span class="line">keytool -genkey -v -keystore my-app.jks -keyalg RSA -keysize 2048 -validity 36500 -<span class="built_in">alias</span> my-app</span><br></pre></td></tr></table></figure>
<p><strong>5. 验证应用是否签名成功</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">jarsigner -verify -verbose -certs 你的apk名</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 示例</span></span><br><span class="line">jarsigner -verify -verbose -certs app-release-unsigned.apk</span><br></pre></td></tr></table></figure>
<p><strong>5. 优化 apk 文件</strong></p>
<p><strong>5.1 首先需要配置环境变量</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 这里以mac下的iTerm2来配置</span></span><br><span class="line">vi ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment"># 增加一行</span></span><br><span class="line"><span class="built_in">export</span> PATH=<span class="variable">$PATH</span>:<span class="variable">$ANDROID_HOME</span>/build-tools/27.0.3</span><br><span class="line"></span><br><span class="line"><span class="comment"># 这里其实是安卓的路径,我们需要给zipalign配置环境变量</span></span><br><span class="line">/Users/poetry/Library/Android/sdk/build-tools/27.0.3/zipalign</span><br><span class="line"></span><br><span class="line"><span class="comment"># 使得bash_profile生效</span></span><br><span class="line"><span class="built_in">source</span> ~/.bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment"># 因为使用到iTerm2需要在.zshrc加入.bash_profile</span></span><br><span class="line">vi ~/.zshrc</span><br><span class="line"></span><br><span class="line"><span class="comment"># 加入bash_profile</span></span><br><span class="line"><span class="built_in">source</span> .bash_profile</span><br><span class="line"></span><br><span class="line"><span class="comment"># 最后新建窗口echo $PATH就看到环境变量配置了</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 查看是否生效</span></span><br><span class="line">zipalign -v</span><br></pre></td></tr></table></figure>
<p><img src="https://upload-images.jianshu.io/upload_images/1480597-2fbdaea1e10a67d3.png" alt="echo $PATH"></p>
<p><strong>5.2 在项目根目录执行</strong></p>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line"><span class="comment"># 自定义最终生成的apk的名字，如 ionicQa.apk</span></span><br><span class="line">zipalign -v 4 app-release-unsigned.apk ionicQa.apk</span><br></pre></td></tr></table></figure>
<p><strong>6. 遇到的问题</strong></p>
<p><strong>6.1 无法打开 jar 文件</strong></p>
<blockquote>
<p>将 秘钥文件 <code>xxx.jks</code> 与 <code>android-release-unsigned.apk</code> 放在同一目录下，放到项目根目录就好了</p>
</blockquote>
<blockquote>
<p>此时就构建好了应用，这里是<a href="https://github.com/poetries/ionic-qa-app/blob/master/ionicQa.apk" target="_blank" rel="noopener">构建的应用</a></p>
</blockquote>
<h3 id="12-5-3-网站微信端发布"><a href="#12-5-3-网站微信端发布" class="headerlink" title="12.5.3 网站微信端发布"></a>12.5.3 网站微信端发布</h3><blockquote>
<p>打包成一个静态站点方便部署</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">sudo ionic build</span><br></pre></td></tr></table></figure>
<blockquote>
<p>静态网站部署的站点资源路径 <code>platform/browser/www</code></p>
</blockquote>
<h1 id="十三、一些问题记录"><a href="#十三、一些问题记录" class="headerlink" title="十三、一些问题记录"></a>十三、一些问题记录</h1><h2 id="13-1-问题"><a href="#13-1-问题" class="headerlink" title="13.1 问题"></a>13.1 问题</h2><p><strong>1. 【ionic3】刷新页面，ws中断</strong></p>
<blockquote>
<p>解决办法升级<code>@ionic/app-scripts</code></p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="code"><pre><span class="line">npm install @ionic/app-scripts@latest --save-dev</span><br></pre></td></tr></table></figure>
<h2 id="13-2-技巧"><a href="#13-2-技巧" class="headerlink" title="13.2 技巧"></a>13.2 技巧</h2><p><strong>读取可空对象</strong></p>
<blockquote>
<p><code>question?.ContentTitle</code> <code>question</code>可能返回空</p>
</blockquote>
<h1 id="十四、更多参考"><a href="#十四、更多参考" class="headerlink" title="十四、更多参考"></a>十四、更多参考</h1><h2 id="14-1-项目学习"><a href="#14-1-项目学习" class="headerlink" title="14.1 项目学习"></a>14.1 项目学习</h2><blockquote>
<p><a href="https://github.com/poetries/ionic-qa-app" target="_blank" rel="noopener">https://github.com/poetries/ionic-qa-app</a></p>
</blockquote>
<h2 id="14-2-文档参考"><a href="#14-2-文档参考" class="headerlink" title="14.2 文档参考"></a>14.2 文档参考</h2><ul>
<li><a href="https://ionicframework.com/docs/" target="_blank" rel="noopener">Ionic官方文档</a></li>
<li><a href="https://github.com/ionic-team" target="_blank" rel="noopener">ionic官方GitHub</a></li>
<li><a href="http://www.runoob.com/ionic/ionic-tutorial.html" target="_blank" rel="noopener">Ionic菜鸟教程</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2019/01/09/angular7-intro-summary/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2019/01/22/mysql-base-review/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
